<template>
	<view class="animatfadeIn faster" style="background: #F5F5F5;">
		<loading-plus v-if="beforeReady"></loading-plus>
		<uni-nav-bar :right-text="isedit ? '完成' : '编辑'" title="购物车" @clickRight="isedit = !isedit"
			fixed="true"></uni-nav-bar>
		<view class="py-5 d-flex a-center j-center bg-white" v-if="disableSelectAll">
			<view class="iconfont icon-gouwuche1 text-light-muted" style="font-size: 50rpx;"></view>
			<text class="mx-2 text-light-muted">购物车还是空的</text>
			<view class="px-2 py-1 border border-light-secondary rounded" hover-class="bg-light-secondary">去逛逛</view>
		</view>
		<!-- 购物车商品列表 -->
		<view class="bg-white px-2" v-else>
			<view class="d-flex a-center py-3 border-bottom border-light-secondary" v-for="(item,index) in list"
				:key="index">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 80upx; height: 80upx;"
					@click="selectItem(index)">
					<radio :value="item.id" color="#FD6801" :checked="item.checked" /><text></text>
				</label>
				<image class="border border-light-secondary rounded p-2 flex-shrink" :src="item.cover" mode="widthFix"
					style="width: 150rpx; height: 150rpx;"></image>
				<view class="flex-1 d-flex flex-column pl-2">
					<view class="text-dark" style="font-size: 35rpx;">
						{{item.title}}
					</view>
					<!-- 规格属性 -->
					<view class="d-flex text-light-muted mb-1" :class="isedit ? 'p-1 bg-light-secondary mb-2' : ''"
						@tap.stop="doShowPopup(index)" v-if="item.sku_type === 1">
						{{item.skusText}}
						<view v-if="isedit" class="iconfont icon-114fangxiang_xiangxia ml-auto"></view>
					</view>
					<view class="mt-auto d-flex j-sb">
						<price priceSize="font-lg" unitSize="font-md">{{item.price}}</price>
						<view class="a-self-end">
							<uni-number-box :min="item.minnum" :value="item.num"
								@change="changeNum($event,item,index)"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="text-center main-text-color font-weight font-md mt-5 mb-3">为你推荐</view>

		<!-- 为你推荐 -->
		<view class="row j-sb bg-white">
			<common-list v-for="(item2,index2) in hotList" :key="index2" :item="item2" index="index2"></common-list>
		</view>
		<!-- 占位 -->
		<view style="height: 100rpx;"></view>
		<!-- 合计 -->
		<view
			class="d-flex a-center position-fixed left-0 right-0 bottom-0 border-top border-light-secondary a-stretch bg-white"
			style="height: 100rpx;z-index: 1000;">
			<label class="radio d-flex a-center j-center flex-shrink" style="width: 120upx;" @click="doSelectAll">
				<radio color="#FD6801" :checked="checkedAll" :disabled="disableSelectAll" />
			</label>
			<template v-if="!isedit">
				<view class="flex-1 d-flex a-center j-center font-md">
					合计：<price>{{totalPrice}}</price>
				</view>

				<view class="flex-1 d-flex a-center j-center main-bg-color text-white font-md"
					hover-class="main-bg-hover-color" style="height: 100%;" @tap="orderConfirm">
					结算
				</view>
			</template>
			<template v-else>
				<view class="flex-1 d-flex a-center j-center font-md main-bg-color text-white" style="height: 100%;">
					移入收藏
				</view>
				<view class="flex-1 d-flex a-center j-center bg-danger text-white font-md"
					hover-class="main-bg-hover-color" style="height: 100%;" @click="doDelGoods">
					删除
				</view>
			</template>
		</view>
		<!-- 属性选择弹出框 -->
		<common-popup :popupClass="popupShow" @hide="doHidePopup">
			<view class="d-flex a-center" style="height: 275rpx;">
				<image src="../../static/images/demo/cate_01.png" mode="widthFix" style="width: 180rpx;height: 180rpx;"
					class="border rounded"></image>
				<view class="pl-2">
					<price priceSize="font-lg" unitSize="font">2365</price>
					<view class="d-block">
						<text v-for="(item2,index2) in popupData.attrs" :key="index2"
							class="mr-1">{{item2.list[item2.selected].name}}</text>
					</view>
				</view>
			</view>
			<scroll-view scroll-y class="w-100" style="height: 660rpx;">
				<card :headTitle="item.title" :headTitleWeight="false" :headBorderBottom="false"
					v-for="(item,index) in popupData.attrs" :key="index">
					<hc-radio-group :label="item" :selected.sync="item.selected"></hc-radio-group>
				</card>
				<view class="d-flex j-sb a-center p-2 border-top border-light-secondary">
					<text>购买数量</text>
					<uni-number-box :min="1" :value="popupData.num" @change="popupData.num = $event"></uni-number-box>
				</view>
			</scroll-view>
			<view class="main-bg-color text-white font-md d-flex a-center j-center" hover-class="main-bg-hover-color"
				style="height: 100rpx;margin-left:-30rpx; margin-right:-30rpx;" @tap.stop="doHidePopup">
				确定
			</view>
		</common-popup>
	</view>
</template>

<script>
	import loading from "@/common/mixin/loading.js"
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from "vuex";
	import uniNumberBox from "@/components/uni-ui/uni-number-box/uni-number-box.vue";
	import card from "@/components/common/card.vue";
	import commonList from "@/components/common/common-list.vue";
	import commonPopup from "@/components/common/common-popup.vue";
	import hcRadioGroup from "@/components/common/radio-group.vue";
	export default {
		mixins: [loading],
		components: {
			uniNumberBox,
			card,
			commonPopup,
			commonList,
			hcRadioGroup
		},
		data() {
			return {
				isedit: false,
				hotList: [],
				loadtext: "上拉加载更多",
				page: 1
			}
		},
		computed: {
			...mapState({
				list: state => state.cart.list,
				popupShow: state => state.cart.popupShow
			}),
			...mapGetters([
				'checkedAll',
				'totalPrice',
				'disableSelectAll',
				'popupData'
			])
		},
		onLoad() {
			this.getData()
			
		},
		beforeDestroy() {
			uni.$off('updateCart')
		},
		onReachBottom() {
			// 是否已经处于加载状态
			if (this.loadtext !== '上拉加载更多') return;
			// 改变加载状态
			this.loadtext = '加载中...'
			this.page++
			// 请求数据
			setTimeout(() => {
				this.getData(false);
			}, 1500);
		},
		onPullDownRefresh() {
			this.getData()
		},
		methods: {
			...mapActions([
				'doSelectAll',
				'doDelGoods',
				'doShowPopup',
				'doHidePopup',
				'updateCartList'
			]),
			...mapMutations([
				'selectItem',
				'initCartList',
				'unSelectAll'
			]),
			changeNum(e, item, index) {
				if (item.num === e) return;
				uni.showLoading({
					title: '加载中...'
				})
				this.$H.post('/cart/updatenumber/' + item.id, {
					num: e
				}, {
					token: true
				}).then(res => {
					console.log(res);
					item.num = e
					uni.hideLoading()
				})

			},
			// 订单结算
			orderConfirm() {
				uni.navigateTo({
					url: "/pages/order-confirm/order-confirm"
				})
			},
			getData(refresh = true, callback = false) {
				// 获取购物车数据
				this.updateCartList().then(res=>{
					uni.stopPullDownRefresh()
				}).catch(err=>{
					uni.stopPullDownRefresh()
				})
				// 获取热门推荐
				let page = refresh ? 1 : this.page
				this.$H.get('/goods/hotlist/' + this.page).then(res => {
					let list = this.format(res)
					this.hotList = refresh ? [...list] : [...this.hotList, ...list]
					console.log(this.list);
					// 恢复加载状态
					this.loadtext = res.length < 8 ? '没有更多了' : '上拉加载更多'
					if (typeof callback === 'function') {
						callback()
					}
				})
			},
			// 格式化
			format(res) {
				return res.map(item => {
					var good_num = item.comments_count === 0 ? 0 : (item.good_comments_count / item
						.comments_count) * 100
					return {
						id: item.id,
						title: item.title,
						cover: item.cover,
						desc: item.desc,
						pprice: item.min_price,
						oprice: item.min_oprice
					}
				})
			},
		}
	}
</script>

<style>

</style>